<script setup lang="ts">
import { ref } from "vue"
import { onLoad } from '@dcloudio/uni-app';
import type { goodsSpuData } from '@/types/home';
import Apis from "@/services/modules/category"

import SideClassifyList from "./compontents/SideClassifyList.vue"
import GoodsList from "./compontents/GoodsList.vue"
import Skeleton from "./compontents/Skeleton.vue"
import type { PinSkuPanelInstance } from "@/types/component";

onLoad(() => {
  searchListForDecorateData()
})

const searchParams = {
  currentPage: 3,
  showCount: 20,
  company_: 1,
  webApp_: 1,
  type_: ""
}

const finished = ref(false)
const list = ref<goodsSpuData[]>([])
const searchListForDecorateData = async () => {

  if (finished.value) {
    return uni.showToast({
      icon: "none",
      title: "没有更多数据了"
    })
  }

  const { data } = await Apis.searchListForShop(searchParams)
  list.value.push(...data.pdList)
  if (searchParams.currentPage < data.totalPage) {
    searchParams.currentPage++
  } else {
    finished.value = true
  }
}

const scrollTop = ref(0)

const toFilter = (val_: string) => {
  searchParams.currentPage = 1
  finished.value = false
  list.value = []
  searchParams.type_ = val_
  scrollTop.value = 0
  searchListForDecorateData()
}

const onScrolltolower = () => {
  searchListForDecorateData()
}

const isTriggered = ref(false)
const onRefresherrefresh = async () => {
  isTriggered.value = true
  searchParams.currentPage = 1
  finished.value = false
  list.value = []
  await searchListForDecorateData()
  isTriggered.value = false
}

const skuPanel = ref<PinSkuPanelInstance>()
const showSkuPanel = async (id: number) => {
  await skuPanel.value?.getData(`${id}`)
  uni.hideTabBar()
}

</script>

<template>
  <view class="category-container">
    <PinCustomBar />
    <view v-if="list" class="category-content">
      <SideClassifyList @to-filter="toFilter" />
      <scroll-view scroll-y class="category-list-container" :scroll-top="scrollTop" refresher-enabled
        :refresher-triggered="isTriggered" @refresherrefresh="onRefresherrefresh" @scrolltolower="onScrolltolower">
        <GoodsList :finished="finished" :list="list" @showSkuPanel="showSkuPanel" />
      </scroll-view>
    </view>
    <Skeleton v-else />
  </view>
  <PinSkuPanel ref="skuPanel" />
</template>

<style lang="scss">
page {
  background: #f7f7f7;
}

.category-container {
  display: flex;
  height: 100vh;
  flex-direction: column;

  .category-content {
    flex: 1;
    display: flex;

    .category-list-container {
      height: 100%;
    }
  }
}
</style>
